<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Blog-<%= blog.title%></title>

		<!-- Bootstrap CSS --><link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="/css/ui-dialog.css">
		
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="container">
			<%- include('../head.ejs')%>
			
			<div class="panel panel-success">
				<div class="panel-heading">
					<h3 class="panel-title"><%= blog.title%>
						<strong><%= blog.author%></strong>
						<small>发布于 <%= blog.add_time.getFullYear()%>年<%= blog.add_time.getMonth()+1%>月<%= blog.add_time.getDate()%>日
							<small><%= blog.tags%>&nbsp;&nbsp;<%= blog.keywords%></small>
						</small>
						
					</h3>
				</div>
				<div class="panel-body">
					<%- blog.content%>
				</div>
				<div class="panel-footer">
						<div class="row">
							<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 text-left">
								<button disabled="disabled" type="button" class="btn btn-default">👁<span id="span_read">(<%= blog.read + 1%>)</span></button>
								<button type="button" class="btn btn-default" id="btn_zan">👍<span id="span_zan">(<%= blog.zan%>)</span></button>
								<button type="button" class="btn btn-default" id="btn_comment">👄<span id="span_comment">(<%= blog.comment%>)</span></button>
							</div>
							<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right hidden">
								<button type="button" class="btn btn-default" id="btn_share">📲</button>
							</div>
						</div>

				</div>
			</div>
			<div class="jumbotron">
				<div class="container">
					<div id="pinglun">
					</div>
					<p>
						<a class="btn btn-default btn-block btn-xs" id="btn_comment_more">更多......</a>
					</p>
				</div>
			</div>
			<%- include('../footer.ejs')%>
		</div>
		<script type="text/javascript" src="/js/jquery-1.10.2.js"></script>
		<!-- Bootstrap JavaScript -->
		<script type="text/javascript" src="/js/bootstrap.min.js"></script>
		<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
		<script type="text/javascript" src='/js/dialog-min.js'></script>
		<script type="text/javascript" src='/js/dialog-plus-min.js'></script>
		<script src="/js/ckEditor/ckeditor.js" type="text/javascript"></script>
		<script type="text/javascript" charset="utf-8">
			var user_id = '<%= user_id%>';
			var user_name = '<%= user_name%>';
			var blog_user_id = '<%= blog.user_id%>';
			var blog_id = '<%= blog._id%>';
			if(user_id == blog_user_id){
				$('#btn_zan').attr('disabled','disabled');
				$('#btn_comment').attr('disabled','disabled');
			}

			function loadComments(page_index,callback) {
				$.getJSON('/comment/getComments', {page_index: page_index,blog_id:blog_id}, function(json, textStatus) {
					callback(json.comments);
				});
			}
			var page_index = 1;
			$('#btn_comment_more').on('click', function() {
				loadComments(page_index,function (comments) {
					if(comments.length < 1){
						var dde = dialog({
								fixed: true,
								title:'Message',
								content:'无更多评论!'
							}).showModal();
							setTimeout(function(){
								dde.close().remove();
							},2000);
						$('#btn_comment_more').hide();
					}else {
						for(var i = 0;i < comments.length;i++){
							var html = "";
								html += "<div class='panel panel-warning'>";
									html += "<div class='panel-heading'>";
										html += "<h4 class='panel-title'>["+ comments[i].user_name + "]评论于" + comments[i].add_time.slice(0,10) + " " + comments[i].add_time.slice(12, 19) + "</h4>";
									html += "</div>";
									html += "<div class='panel-body'>"+comments[i].comment+"</div>";
								html += "</div>";
							$('#pinglun').append(html);
						}
						page_index ++;
					}
				});
			});

			//加载评论
			function fristLoadComments () {
				page_index = 1;
				loadComments(page_index,function (comments) {
					if(comments.length < 1){
						$('#pinglun').append("<h5 class='text-center'>暂无评论</h5>");
						$('#btn_comment_more').hide();
					}else {
						for(var i = 0;i < comments.length;i++){
							var html = "";
								html += "<div class='panel panel-warning'>";
									html += "<div class='panel-heading'>";
										html += "<h4 class='panel-title'>["+ comments[i].user_name + "]评论于" + comments[i].add_time.slice(0,10) + " " + comments[i].add_time.slice(12, 19) + "</h4>";
									html += "</div>";
									html += "<div class='panel-body'>"+comments[i].comment+"</div>";
								html += "</div>";
							$('#pinglun').append(html);
						}
						page_index ++;
					}
				});
			}
			fristLoadComments();
			//点赞
			$('#btn_zan').on('click',function () {
				$.post('/blog/zan',{'_id':blog_id}, function(data, textStatus, xhr) {
					//console.log(data);
					if(data.status){
						var zan = data.blog.zan + 1;
						$('#span_zan').text('(' + zan + ')');
						$('#btn_zan').attr('disabled', 'disabled');
					}
				});
			});

			//评论
			$('#btn_comment').on('click',function () {
				var editor = null;
				if(user_id == ''){
					var dd = dialog({
						fixed: true,
						title:'Error',
						content:'您还未登录',
						onclose:function () {
							$('#btn_comment').blur();
						}
					}).showModal();
					setTimeout(function(){
						dd.close().remove();
					},2000);
					return;
				}
				var html = "<textarea style='width:100%;' name='comment' id='comment' class='form-control' rows='3' required='required' placeholder='请输入内容!'></textarea>";
				var d = dialog({
					title:'评论',
					content:html,
					okValue:'确定',
					ok:function () {
						var that = this;
						var comment = editor.getData().trim();
						if(comment == '' || comment == null){
							$('#comment').focus();
							var dde = dialog({
								fixed: true,
								title:'Error',
								content:'请输入评论内容'
							}).showModal();
							setTimeout(function(){
								dde.close().remove();
							},2000);
							return false;
						}
						$.post('/comment/addComment', {blog_id: blog_id,user_id:user_id,user_name:user_name,comment:comment,}, function(data, textStatus, xhr) {
							/*optional stuff to do after success */
							var message = '网络错误,请稍后再试!';
							if(data.status){
								message = '评论成功!';
								$('#btn_comment').attr('disabled', 'disabled');
								if(data.blog != null){
									var num = data.blog.comment + 1;
									$('#span_comment').text('(' + num + ')');
								}

								$('#pinglun').empty();
								$('#btn_comment_more').show();
								fristLoadComments();
							}
							that.close().remove();
							var dde = dialog({
								fixed: true,
								title:'Message',
								content:message
							}).showModal();
							setTimeout(function(){
								dde.close().remove();
							},2000);
						});
						return false;
					},
					onshow:function () {
						var content = document.getElementById('comment');
						editor = CKEDITOR.replace(content,{
							toolbar:[
								['Font','FontSize','TextColor','BGColor','Smiley', 'Format','Maximize']
							],
							height: 150
						});
					},
					onclose:function () {
						$('#btn_comment').blur();
					}
				});

				var w = $(window).width();
				d.width(0.618 * w).showModal();
			});

			//分享
			$('#btn_share').on('click', function() {
				var d = dialog({
					fixed: true,
					content:'分享到',
					button:[
						{
							value:'微信',
							callback:function () {
								
							}
						},
						{
							value:'朋友圈',
							callback:function () {
								
							}
						},
						{
							value:'QQ',
							callback:function () {
								
							}
						},
						{
							value:'QQ空间',
							callback:function () {
								
							}
						}
					],
					onclose:function () {
						$('#btn_share').blur();
					}
				}).show();
			});
		</script>
	</body>
</html>